<template>
  <div class="home">
    <a-row
      style="padding-bottom: 40px; border-bottom: 10px solid #f1f2f6"
      type="flex"
      justify="space-around"
    >
      <a-col :span="4">
        <a-card
          class="card"
          style="
            background-image: linear-gradient(#1ec695, #33cccc);
            color: #fff;
          "
          title="今日消费额："
          :bordered="true"
        >
          <a-row v-if="cost.length >= 1">
            <a-col :span="12">
              USD：{{ (cost[0].nowOutSumOfMoney * 1).toFixed(2) }}
            </a-col>
            <a-col :span="12">
              GBP：{{ (cost[1].nowOutSumOfMoney * 1).toFixed(2) }}
            </a-col>
          </a-row>
          <a-row v-if="cost.length >= 1">
            <a-col :span="12">
              EUR：{{ (cost[2].nowOutSumOfMoney * 1).toFixed(2) }}
            </a-col>
            <a-col :span="12">
              CAD：{{ (cost[3].nowOutSumOfMoney * 1).toFixed(2) }}
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="4">
        <a-card
          class="card"
          style="background-image: linear-gradient(to right, #f4ae95, #e2718c)"
          title="今日代发出/入库"
          :bordered="true"
        >
          <h2 style="color: #fff; text-align: right">
            {{ homeCountNum.OutApplyCount * 1 || 0 }}笔/{{
              homeCountNum.wapplyCount * 1 || 0
            }}笔
          </h2>
        </a-card>
      </a-col>
      <a-col :span="4">
        <a-card
          class="card"
          style="background-image: linear-gradient(to right, #ff9933, #efcb2d)"
          title="今日转运出/入库"
          :bordered="true"
        >
          <h2 style="color: #fff; text-align: right">
            {{ homeCountNum.toutCount * 1 || 0 }}笔/{{
              homeCountNum.tCount * 1 || 0
            }}笔
          </h2>
        </a-card>
      </a-col>
      <a-col :span="4">
        <a-card
          class="card"
          style="background-image: linear-gradient(#2da9fa, #66ccff)"
          title="今日退件："
          :bordered="true"
        >
          <h2 style="color: #fff; text-align: right">
            {{
              (homeCountNum.retreatCount * 1 || 0) +
              (homeCountNum.retreatBatchCount * 1 || 0)
            }}笔
          </h2>
        </a-card>
      </a-col>
      <a-col :span="4">
        <a-card
          class="card"
          style="background-image: linear-gradient(#aa89fd, #cc99cd)"
          title="今日工单新增："
          :bordered="true"
        >
          <h2 style="color: #fff; text-align: right">
            {{ homeCountNum.workCount * 1 || 0 }}笔
          </h2>
        </a-card>
      </a-col>
    </a-row>
    <a-row
      style="
        padding-top: 20px;
        padding-bottom: 20px;
        border-bottom: 10px solid #f1f2f6;
      "
      :gutter="24"
    >
      <a-col :span="10">
        <WeekSum />
      </a-col>
      <a-col :span="8">
        <PercentageOfSales />
      </a-col>
      <a-col :span="6">
        <Monetary />
      </a-col>
    </a-row>
    <a-row :gutter="24">
      <a-col :span="24">
        <BillingInfo />
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { home_date, home_nowCost } from "@/apis/system/Home/Home";
import WeekSum from "@/components/system/Home/WeekSum.vue";
import PercentageOfSales from "@/components/system/Home/PercentageOfSales.vue";
import Monetary from "@/components/system/Home/Monetary.vue";
import BillingInfo from "@/components/system/Home/BillingInfo.vue";
export default {
  components: {
    WeekSum,
    PercentageOfSales,
    Monetary,
    BillingInfo,
  },
  mounted() {
    this.getHomeDate();
  },
  data() {
    return {
      homeCountNum: {},
      cost: [
        { nowOutSumOfMoney: 0 },
        { nowOutSumOfMoney: 0 },
        { nowOutSumOfMoney: 0 },
        { nowOutSumOfMoney: 0 },
      ],
    };
  },
  methods: {
    async getHomeDate() {
      let { code, responseBody } = await home_date();
      if (code === "200") {
        this.homeCountNum = responseBody;
      }
      let res = await home_nowCost();
      if (res.code === "200") {
        this.cost = res.responseBody;
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.card .ant-card-head {
  border-bottom: none;
  color: #fff;
}
/deep/.ant-card-body {
  padding: 14px;
}
.card {
  box-shadow: 5px 5px 10px 1px #ccc;
  border-radius: 10px;
  border: none;
}

// .home{
//     height: 100%;
// }
</style>